<template>
	<view>
		<view class="header">
			<view id="back" v-if="back">
				<u-icon name="arrow-left" @click="clickBack" size="60rpx"></u-icon>
			</view>
			<text id="title">修改姓名</text>
			<u-button id="button" text="保存" @click="saveName" :disabled="btnDisabled" plain></u-button>
		</view>
		<view style="position: relative;">
			<u--input fontSize="36" class="input" @change="onInput" maxlength="10" :value="value" border="bottom" clearable color="black"></u--input>
		</view>
		<view style="position: relative;">
			<text class="tip">请在上方输入框内更改姓名。</text>
		</view>
	</view>
</template>

<script>
	var _this = null;
	export default {
		data() {
			return {
				back: false,
				btnDisabled: true,
				value: 'Ambitious'
			}
		},
		methods: {
			clickBack: function(e) {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						url: pages[pages.length - 2].url
					})
				}
			},
			onInput: function(e) {
				_this.btnDisabled = false;
				_this.value = e;
			},
			saveName: function() {
				var pages = getCurrentPages();
				if (pages.length > 1) {
					var lastPage = pages[pages.length - 2];
					lastPage.$vm.setRealname(_this.value);
					uni.navigateBack({
						url: lastPage.url
					})
				}
			}
		},
		onLoad(options) {
			_this = this;
			_this.value = options.realname;
			_this.back = getCurrentPages().length > 1;
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		height: calc(var(--status-bar-height) + 96rpx);
		position: relative;

		#back {
			position: absolute;
			padding-top: calc(var(--status-bar-height) + 18rpx);
			padding-left: 12rpx;
			z-index: 99;
		}
		
		#title {
			position: absolute;
			left: 320rpx;
			top: calc(var(--status-bar-height) + 22rpx);
			font-weight: 1000;
			font-family: 'YouYuan';
			font-size: 36rpx;
		}
		
		#button {
			position: absolute;
			background: #3d5cff;
			width: 120rpx;
			top: calc(var(--status-bar-height) + 12rpx);
			right: 12rpx;
			height: 70rpx;
			border-radius: 18rpx;
			color: white;
		}
	}
	
	.input {
		position: absolute;
		width: 670rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	
	.tip {
		position: absolute;
		color: #b8b8d2;
		font-size: 28rpx;
		margin-top: 120rpx;
		margin-left: 24rpx;
	}
</style>
